<template>
    <div class=" login_body">
        <div class='login '>
            <div class='login_title'>
                <span>管理员登录</span>
            </div>
            <div class='login_fields'>
                <div class='login_fields__user'>
                    <div class='icon'>
                        <img alt="" src='../assets/img/user_icon_copy.png'>
                    </div>
                    <input name="login" v-model="userName" placeholder='用户名' maxlength="16" type='text' autocomplete="off" />
                    <div class='validation'>
                        <img alt="" src='../assets/img/tick.png'>
                    </div>
                </div>
                <div class='login_fields__password'>
                    <div class='icon'>
                        <img alt="" src='../assets/img/lock_icon_copy.png'>
                    </div>
                    <input name="pwd" v-model="password" placeholder='密码' maxlength="16" type='text' autocomplete="off">
                    <div class='validation'>
                        <img alt="" src='../assets/img/tick.png'>
                    </div>
                </div>
                <div class='login_fields__password'>

                </div>
                <div class='login_fields__submit'>
                    <input @click="login" type='button' value='登录'>
                </div>
            </div>
            <div class='success'>
            </div>
            <div class='disclaimer'>
                <p>欢迎登陆后台管理系统</p>
            </div>
        </div>
        <div class='authent'>
            <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
                <div class="loader-inner ball-clip-rotate-multiple">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <p >认证中...</p>
        </div>
        <div  class="OverWindows"></div>
    </div>
</template>

<script>
    import request from "../util/request";
    import modelsApi from '@/api/modelsApi'
    import util from '@/util/util'
    import {mapMutations } from "vuex"
    export default {
        name: "Login",
        data() {
            return {
                password: "",
                userName:""
            }
        },
        methods: {
            ...mapMutations(["setUserInfo","setMenuList","setPathList","setAuthList"]),
            login() {
                request.post("/manager/login", {
                    "password":this.password,
                    "userName": this.userName
                }).then(res => {
                 this.getAuth()
                })
            },
            getAuth(){
                this.setUserInfo("")
                 modelsApi.getMenu().then(res=>{
                    this.setMenuList(res.data.menu)
                    let ret=[]
                    let path=[]
                    res.data.opt.forEach(item=>{
                        if(item.path!=""){
                            path.push(item.path)
                        }
                        ret.push(item.permission)
                    })
                    this.setAuthList(ret.toString())
                    res.data.menu.forEach(item=>{
                        path.push(item.path)
                    })
                   this.setPathList(path.toString())
                    window.sessionStorage.setItem("pathList",util.encrypt(path.toString()))
                    this.$router.replace("/index/flower")
                })
            }
        },
        mounted() {
            $(document).keypress(function (e) {
                // 回车键事件
                if (e.which == 13) {
                    $('input[type="button"]').click();
                }
            });
            //粒子背景特效
            $('.login_body').particleground({
                dotColor: '#E8DFE8',
                lineColor: '#133b88'
            });
            $('input[type="text"]').focus(function () {
                $(this).prev().animate({'opacity': '1'}, 200);
            });
            $('input[type="text"],input[type="password"]').blur(function () {
                $(this).prev().animate({'opacity': '.5'}, 200);
            });
            $('input[name="login"],input[name="pwd"]').keyup(function () {
                var Len = $(this).val().length;
                if (!$(this).val() == '' && Len >= 5) {
                    $(this).next().animate({
                        'opacity': '1',
                        'right': '30'
                    }, 200);
                } else {
                    $(this).next().animate({
                        'opacity': '0',
                        'right': '20'
                    }, 200);
                }
            });
            $('input[name="pwd"]').attr('type', 'password');

        }
    }
</script>

<style scoped>
    @import "../assets/css/styles.css";
    @import "../assets/css/demo.css";
    @import "../assets/css/loaders.css";
    .login_body{
        height: 100vh;
        overflow: hidden;
    }
</style>